<template>

  <el-row>
    <el-col :span="10">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>个人信息</span>
          </div>
        </template>
        <ul class="basic">
          <li class="avatar">
            <div style="text-align: center">
              <el-image style="height: 120px;width: 120px" :src="userInfo.avatar" fit="fill"/>
            </div>
          </li>
          <el-divider/>
          <li>用户名称:{{ userInfo.nickName }}</li>
          <el-divider/>
          <li>手机号码:{{ userInfo.mobile }}</li>
          <el-divider/>
          <li>用户邮箱:{{ userInfo.email }}</li>
          <el-divider/>
          <li>所属部门:{{ userInfo.deptName }}</li>
          <el-divider/>
          <li>所属角色:{{ userInfo.roleNames }}</li>
          <el-divider/>
          <li>创建日期:{{ userInfo.createTime }}</li>
          <el-divider/>
        </ul>
      </el-card>
    </el-col>
    <el-col :span="13" :offset="1">
      <el-card class="box-card">
        <div class="card-header">
          <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="基本资料" name="first"></el-tab-pane>
            <el-tab-pane label="修改密码" name="second"></el-tab-pane>
            <el-tab-pane label="录入人脸" name="third"></el-tab-pane>
          </el-tabs>
        </div>
        <el-form v-show="activeName === 'first'" :model="form" label-width="120px" size="small">
          <el-form-item label="昵称">
            <el-input v-model="form.nickName" size="middle"/>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="form.mobile" size="middle"/>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="form.email" size="middle"/>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio v-model="form.sex" :label="1">男</el-radio>
            <el-radio v-model="form.sex" :label="2">女</el-radio>
            <el-radio v-model="form.sex" :label="0">保密</el-radio>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updateInfo">保存</el-button>
            <el-button type="danger" @click="">清空</el-button>
          </el-form-item>
        </el-form>
        <el-form v-show="activeName === 'second'" :model="password" :rules="passwordRules" label-width="120px"
                 size="small">
          <el-form-item prop="oldPassword" label="旧密码">
            <el-input v-model="password.oldPassword" size="middle"/>
          </el-form-item>
          <el-form-item prop="newPassword" label="新密码">
            <el-input v-model="password.newPassword" size="middle"/>
          </el-form-item>
          <el-form-item prop="confirmNewPassword" label="确认密码">
            <el-input v-model="password.confirmNewPassword" size="middle"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="setPassword">保存</el-button>
            <el-button type="danger" @click="">清空</el-button>
          </el-form-item>
        </el-form>
        <div v-show="activeName === 'third'">
          <mine-face></mine-face>
          <el-button v-show="takeFaceStatus === 1" class="face-btn" @click="handleChangeFace(2)">获取人脸</el-button>
          <el-button v-show="takeFaceStatus === 2" class="face-btn" @click="handleChangeFace(0)">关闭人脸</el-button>
          <el-button v-show="takeFaceStatus === 2" class="face-btn" @click="handleUploadFace">拍照上传</el-button>
        </div>
      </el-card>
    </el-col>
  </el-row>

</template>

<script>
import {getLoginInfoById} from "@/api/system/login";
import {updatePassword, updateById, setFaceId} from "@/api/system/account";
import {onMounted, ref, getCurrentInstance} from "vue";
import {store} from "@/store";
import MineFace from "@/components/mine-face";

export default {
  name: "index",
  components: {MineFace},
  setup() {
    const userInfo = ref({})
    const activeName = ref('first')
    const takeFaceStatus = ref(1)		// 0: 不使用人脸，1: 使用人脸，并初始化，2: 获取人脸在网页展示。用于标记页面上（展示层）按钮状态与图片的展示，仅仅用于前端交互
    const {proxy} = getCurrentInstance()
    const form = ref({
      nickName: '',
      mobile: '',
      email: '',
      sex: 0,
      id: ''
    })
    const password = ref({
      oldPassword: '',
      newPassword: '',
      confirmNewPassword: '',
      id: ''
    })
    const passwordRules = ref({
      oldPassword: [
        {
          required: true,
          message: '旧密码不可为空',
          trigger: 'blur'
        }, {
          min: 6,
          max: 16,
          message: '用户名长度不可低于6位不可高于16位',
          trigger: 'blur'
        }
      ],
      newPassword: [
        {
          required: true,
          message: '新密码不可为空',
          trigger: 'blur'
        }, {
          min: 6,
          max: 16,
          message: '用户名长度不可低于6位不可高于16位',
          trigger: 'blur'
        }
      ], confirmNewPassword: [
        {
          required: true,
          message: '确认密码不可为空',
          trigger: 'blur'
        }, {
          min: 6,
          max: 16,
          message: '用户名长度不可低于6位不可高于16位',
          trigger: 'blur'
        }
      ],
    })
    const initUserInfo = () => {
      let accountInfo = store.state.account.accountInfo
      getLoginInfoById(accountInfo.id, store.state.account.token).then(res => {
        if (res.success) {
          userInfo.value = res.data.accountVO
        }
      })
    }
    const setPassword = () => {
      password.value.id = store.state.account.accountInfo.id
      updatePassword(password).then(res => {
        if (res.success) {
          ElMessage({
            message: res.msg,
            type: 'success',
          })
        } else {
          ElMessage({
            message: res.msg,
            type: 'warning',
          })
        }
      })
    }
    const updateInfo = () => {
      form.value.id = store.state.account.accountInfo.id
      updateById(form.value).then(res => {
        if (res.success) {
          ElMessage({
            message: res.msg,
            type: 'success',
          })
        } else {
          ElMessage({
            message: res.msg,
            type: 'warning',
          })
        }
      })
    }
    const handleChangeFace = (val) => {
      takeFaceStatus.value = val
      if (val) {
        console.log(takeFaceStatus.value)
        //开启人脸登录
        proxy.$bus.emit('openFace')
      } else {
        proxy.$bus.emit('closeFace')
      }
    }
    const handleUploadFace = () => {
      let video = document.getElementById('video');
      let canvas = document.getElementById('canvas');
      let ctx = canvas.getContext('2d');
      ctx.drawImage(video, 0, 0, 315, 150);
      let img = document.getElementById('canvas').toDataURL();
      // base64的图片
      let img64 = img.split("base64,")[1];
      let userId = store.state.account.accountInfo.id
      let userName = store.state.account.accountInfo.accountName
      setFaceId({userId: userId, userName: userName, img64: img64}).then(res => {
        if (res.success) {
          ElMessage({
            message: res.msg,
            type: 'success',
          })
        } else {
          ElMessage({
            message: res.msg,
            type: 'warning',
          })
        }
      })
    }
    onMounted(() => {
      initUserInfo()
    })
    return {
      userInfo,
      activeName,
      form,
      password,
      passwordRules,
      takeFaceStatus,

      handleChangeFace,
      setPassword,
      updateInfo,
      handleUploadFace
    }
  }

}
</script>

<style lang="scss" scoped>
ul {
  list-style-type: none;
}

.basic {
  font-size: 12px;
  color: #888888;
}

.el-divider--horizontal {
  margin: 5px 5px;
}


</style>
